<template>
  <div>
    <el-dialog
      title="调整活动时间"
      :visible.sync="editFormInline.show"
      width="40%"
    >
      <div class="activeTime">
        <div>
          <span>原活动时间：{{ editFormInline.startDate }}</span>
          <span> &ensp; 至 &ensp; </span>
          <span v-if="editFormInline.activityTimeType === 'LONG_TERM'">长期有效</span>
          <span v-else>{{ editFormInline.endDate }}</span>
        </div>
        <div>
          <span>新活动时间：{{ editFormInline.startDate }} 至</span>
          <el-radio-group
            v-model="editFormInline.activityTimeType"
            style="margin-left:20px"
            @change="getTimeType"
          >
            <el-radio
              :label="item.label"
              v-for="(item, index) of timeTypes"
              :key="index"
              >{{ item.value }}</el-radio
            >
          </el-radio-group>
          <el-date-picker
            v-if="editFormInline.activityTimeType === 'SPECIFIED_TIME'"
            style="margin-left:10px"
            v-model="endTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="success" @click="confirm">确认选择</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { editActiveEndTime } from '@/api/activityCenter/activityManage/giveLessons'

export default {
  props: {
    editFormInline: {
      type: Object,
      default: function() {
        return {
          id: '',
          show: false,
          startDate: '',
          endDate: '',
          activityTimeType: '',
          activityEndTime: ''
        }
      }
    }
  },
  data() {
    return {
      pickerOptions: {},
      timeTypes: [
        { label: 'LONG_TERM', value: '长期有效' },
        { label: 'SPECIFIED_TIME', value: '指定时间' }
      ],
      endTime: ''
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    cancel() {
      this.endTime = ''
      this.editFormInline.show = false
    },
    // 时间补0
    supplement(nn) {
      return (nn = nn < 10 ? '0' + nn : nn)
    },
    // 转换时间格式
    format(Date, str) {
      var obj = {
        Y: Date.getFullYear(),
        M: Date.getMonth() + 1,
        D: Date.getDate(),
        H: Date.getHours(),
        Mi: Date.getMinutes(),
        S: Date.getSeconds()
      }
      // 拼接时间 hh:mm:ss
      var time =
        ' ' +
        this.supplement(obj.H) +
        ':' +
        this.supplement(obj.Mi) +
        ':' +
        this.supplement(obj.S)
      // yyyy-mm-dd
      if (str.indexOf('-') > -1) {
        return (
          obj.Y +
          '-' +
          this.supplement(obj.M) +
          '-' +
          this.supplement(obj.D) +
          time
        )
      }
      // yyyy/mm/dd
      if (str.indexOf('/') > -1) {
        return (
          obj.Y +
          '/' +
          this.supplement(obj.M) +
          '/' +
          this.supplement(obj.D) +
          time
        )
      }
    },
    //日期字符串转成时间戳
    dateStrChangeTimeTamp(dateStr) {
      dateStr = dateStr.substring(0, 19)
      dateStr = dateStr.replace(/-/g, '/')
      let timeTamp = new Date(dateStr).getTime()
      return timeTamp
    },
    getTimeType(val) {
      if (val === 'LONG_TERM') {
        this.endTime = ''
      }
    },
    confirm() {
      if (
        this.editFormInline.activityTimeType === 'SPECIFIED_TIME' &&
        !this.endTime
      ) {
        this.$message({
          message: '请选择指定时间',
          type: 'warning'
        })
        return
      }
      let id = this.editFormInline.id
      let obj = {}
      obj.activityEndTime = this.endTime
      editActiveEndTime(
        id,
        obj,
        (res) => {
          this.editFormInline.show = false
          this.$emit('toSearch')
          this.endTime = ''
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'danger'
          })
          this.endTime = ''
        }
      )
    }
  },
  watch: {
    'editFormInline.startDate': {
      handler(nVal, oVal) {
        let sliceTime = this.format(new Date(nVal), '-')
          .slice(10)
          .trim()
        this.pickerOptions = {
          disabledDate(time) {
            let times = new Date(nVal).getTime() - 24 * 3600 * 1000
            return time.getTime() <= times
          },
          selectableRange: `${sliceTime} - 23:59:00`
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.activeTime {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  height: 100px;
}
:deep(.el-input__inner) {
  height: 32px !important; //修改日期选择器选择框高度
}
:deep(.el-input__icon) {
  //修改前后小图标位置
  line-height: 32px !important;
}
</style>
